<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <statistics-cards />

    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <visitor-trend />
      </el-col>
      <el-col :span="8">
        <visitor-source />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <recent-visits />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import StatisticsCards from './StatisticsCards.vue'
import VisitorTrend from './VisitorTrend.vue'
import VisitorSource from './VisitorSource.vue'
import RecentVisits from './RecentVisits.vue'
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;

  .chart-row {
    margin-bottom: 20px;
  }
}

// 响应式布局
@media (max-width: 768px) {
  .dashboard {
    padding: 10px;
  }
}
</style> 
 